<template>
  <div id="wrap" class="wrap content">
    <div class="top">
      <div class="" style="height: 100%;float: left;display: flex;align-items: center">
        <img src="../../assets/logo.png">
        <span style="font-size: 18px;color: #fff;margin-left: 5px">纽创固废智慧管理云平台</span>
      </div>
      <div class="setting" style="float: right;min-width: 160px;background: #3ae2cb;height: 66px">
        <!-- <span class="systemTime" style="color: #fff;font-size: 14px;">{{ systemTime }}</span> -->
        <img src="../../assets/avatar.jpeg" style="width: 30px;height: 30px;border-radius: 50%;">
        <el-dropdown>
          <span class="el-dropdown-link"><label class="username" :title="username">{{ username }}</label><i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown" style="margin-left: -10px;">
            <el-dropdown-item>
              <span @click="modifyPwd">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <span @click="logout">退出登录</span>
            </el-dropdown-item>
            <!--<el-dropdown-item divided>-->
              <!--<span @click="logout">个人中心</span>-->
            <!--</el-dropdown-item>-->
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div>
      <Nav />
      <Content />
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="600px" @close="close">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="旧密码" prop="password" label-width="100px">
          <el-input type="password" v-model="form.password" clearable placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword" label-width="100px">
          <el-input type="password" clearable v-model="form.newPassword" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword" label-width="100px" ref="confirmPassword">
          <el-input type="password" clearable v-model="form.confirmPassword" placeholder="请输入确认密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { dateFormat } from '@/utils/filter'
import Nav from '@/components/Nav/Nav'
import Content from '@/components/Content/Content'
import { hex_md5 } from '@/utils/md5'
export default {
  data() {
    let validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'));
      } else {
        callback();
      }
    };
    let validateNewPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        callback();
      }
    };
    let validateConfirmPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'));
      } else {
        callback();
      }
    };
    return {
      rootPath: '首页',
      systemTime: '',
      dialogVisible: false,
      form: {
        password: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        password: [{ required: true, validator: validatePassword, trigger: 'blur' }],
        newPassword: [{ required: true, validator: validateNewPwd, trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: validateConfirmPwd, trigger: 'blur' }]
      },
      username: localStorage.userName || ''
    };
  },
  computed: {
    // getStyle() {
    //   let width = this.$store.state.isCollapse ? 64 : 200;
    //   if (this.$store.state.isCollapse) return `width: calc(100% - ${ width }px);`;
    //   return `width: calc(100% - ${ width }px);`;
    // }

  },
  mounted() {


    document.getElementById('wrap').style.minHeight = document.documentElement.clientHeight + 'px';
    this.$router.push({ path: '/main/index' });

  },
  watch: {
    $route(newVal) {
      let arr = [];
      newVal.matched.forEach(item => {
        if (item.meta.title) {
          if (item.path.includes('add') && JSON.stringify(newVal.query) == "{}") {
            item.meta.title = '添加';
            item.name = '添加';
          } else if (item.path.includes('add') && JSON.stringify(newVal.query) != "{}") {
            item.meta.title = '修改';
            item.name = '修改';
          }
          arr.push(item.name);
        }
      });
      this.rootPath = arr.join(' / ');
      localStorage
        .rootPath = this.rootPath;
    }
  },
  mounted() {
    let timer;
    clearInterval(timer);
    timer = setInterval(() => {
      this.systemTime = dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss');
    }, 1000);
  },
  methods: {
    close() {
      this.$refs['form'].resetFields();
    },
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.newPassword != this.form.confirmPassword) {
            this.$refs['confirmPassword'].validateState = 'error';
            this.$refs['confirmPassword'].validateMessage = '新密码与确认密码不一致';
            return;
          } else {
            let str = hex_md5('energy123');
            this.$common.$ajax('manage/updatePassword', {
              oldPassword: hex_md5(hex_md5(this.form.password) + str),
              newPassword: hex_md5(hex_md5(this.form.newPassword) + str),
              surePassword: hex_md5(hex_md5(this.form.confirmPassword) + str),
            }, 'post').then(res => {
              this.$message.success('修改成功，请重新登录！');
              this.dialogVisible = false;
              this.$refs['form'].resetFields();
              setTimeout(() => {
                this.logout();
              }, 1000);
            });
          }
        }
      });
    },
    collapse() {
      this.$store.commit('collapse');
    },
    modifyPwd() {
      this.dialogVisible = true;
    },
    logout() {
      this.$router.push({ path: '/' });
      localStorage.clear();
      this.$store.state.openTab = []
    }
  },
  components: {
    Nav,
    Content
  },
}

</script>
<style lang="scss" scoped>
.wrap {
  background: #F5FAF8;
}

.top {
  position: fixed;
  height: 66px;
  font-size: 50px;
  // border-bottom: 1px solid #E9E9E9;
  box-sizing: border-box;
  // width: calc(100% - 200px);
  width: 100%;
  z-index: 100;
  background: #1d3852;
  padding: 0 20px;
  box-sizing: border-box;
  padding-right: 0;

  &.root {
    height: 66px;
    line-height: 66px;
    font-size: 18px;
    padding-left: 55px;
    color: #fff;
    // background: #fff;


  }

  .collapes {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    z-index: 1000;

    i {
      display: block;
      width: 20px;
      height: 15px;
    }

    .collapse-hide {
      background: url(../../assets/collapse-hide.png);
    }

    .collapse-show {
      background: url(../../assets/collapse-show.png);
    }
  }
}

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;

  p {
    font-size: 12px;
  }
}

.username {}

</style>
